@import '../common.less';


.Box{
    width: 60%;
    min-height: 70%;
    margin: 5% auto;
    box-sizing: border-box;
    // border: 1px solid blue;
    display: flex;
    &{ .clearfix} ;
    @media only screen and (min-width: 960px) and (max-width:1280px) {
        .right{display: none}
        div{
            // float: left;
            width: 28%;
            margin-left: 2%;
            background-color: peru;
            min-height: 60%;
        }
        div:first-child{
            margin-left: 0;
        }
        .agree{
            width: 70%;
        }   
    }
    @media  screen and (max-width: 960px) {
        .left{display: none}
        .right{display: none}
        div{
            width: 100%;
            background-color: red;
            min-height: 60%;
        } 
    }
    @media  screen and (min-width: 1280px){
        div{
            // float: left;
            width: 23%;
            margin-left: 2%;
            min-height: 60%;
        }
        div:first-child{
            // background-color: aqua;
            margin-left: 0;
            box-sizing: border-box;
            @-webkit-keyframes myfirst{
                0%{top:10px;left:10px;-webkit-transform:rotateY(0deg);}
                25% {top:400px ;left:10px;-webkit-transform:rotateY(90deg) scale(1.5, 1.5) }
                50% {top:400px ;left:400px;-webkit-transform:rotateZ(180deg) scale(0.5, 0.5) }
                75% {top:10px ;left:400px;-webkit-transform:rotateX(270deg) scale(2, 2) }
                100%{top:10px;left:10px;-webkit-transform:rotateY(360deg)}
            }
            @-moz-keyframes myfirst{
                0%{top:10px;left:10px;-moz-transform:rotateY(0deg);}
                25% {top:400px ;left:10px;-moz-transform:rotateY(90deg) scale(1.5, 1.5) }
                50% {top:400px ;left:400px;-moz-transform:rotateZ(180deg) scale(0.5, 0.5) }
                75% {top:10px ;left:400px;-moz-transform:rotateX(270deg) scale(2, 2) }
                100%{top:10px;left:10px;-moz-transform:rotateY(360deg)}
            }
            @-ms-keyframes myfirst{
                0%{top:10px;left:10px;-ms-transform:rotateY(0deg);}
                25% {top:400px ;left:10px;-ms-transform:rotateY(90deg) scale(1.5, 1.5) }
                50% {top:400px ;left:400px;-ms-transform:rotateZ(180deg) scale(0.5, 0.5) }
                75% {top:10px ;left:400px;-ms-transform:rotateX(270deg) scale(2, 2) }
                100%{top:10px;left:10px;-ms-transform:rotateY(360deg)}
            }
            @-o-keyframes myfirst{
                0%{top:10px;left:10px;-o-transform:rotateY(0deg);}
                25% {top:400px ;left:10px;-o-transform:rotateY(90deg) scale(1.5, 1.5) }
                50% {top:400px ;left:400px;-o-transform:rotateZ(180deg) scale(0.5, 0.5) }
                75% {top:10px ;left:400px;-o-transform:rotateX(270deg) scale(2, 2) }
                100%{top:10px;left:10px;-o-transform:rotateY(360deg)}
            }
            @keyframes myfirst{
                0%{top:10px;left:10px;transform:rotateY(0deg);}
                25% {top:400px ;left:10px;transform:rotateY(90deg) scale(1.5, 1.5) }
                50% {top:400px ;left:400px;transform:rotateZ(180deg) scale(0.5, 0.5) }
                75% {top:10px;left:400px;transform:rotateX(270deg) scale(2, 2) }
                100%{top:10px;left:10px;transform:rotateY(360deg)}
            }
            ul{
                margin-top: 80% ;
                padding: 0 ;
                list-style: none;
                width: 100%;
                height: 100%;
                position: relative;
                
                // 透镜视点
                transform: rotateX(163deg) rotateY(144deg) rotateZ(156deg) ;
                -webkit-transform: rotateX(163deg) rotateY(144deg) rotateZ(156deg) -webkit-transform 2s;
                -moz-transform: rotateX(163deg) rotateY(144deg) rotateZ(156deg)  -moz-transform 2s;
                -ms-transform: rotateX(163deg) rotateY(144deg) rotateZ(156deg) -ms-transform 2s;
                -o-transform: rotateX(163deg) rotateY(144deg) rotateZ(156deg) -o-transform 2s;

                &{.transform-style(@perspective:1200)}
                
                /*旋转看看效果*/
                // animation: myfirst 20s;
                
                animation-timing-function:ease-in;
                animation-direction: alternate; /* 交替播放*/
                animation-iteration-count:3; /*动画迭代次数  infinite 循环播放*/
                -moz-animation: myfirst 10s ease-in alternate 3;	/* Firefox */
                -webkit-animation: myfirst 10s ease-in alternate 3;	/* Safari 和 Chrome */
                -o-animation: myfirst 10s ease-in alternate 3;
                &:hover{
                    transform: rotate3d(0.5, 0.8 ,1, 78deg) animation-delay 2s;
                    
                }
                li{
                    width: 140px;
                    height: 140px;
                    margin: 0 18%;
                    position: absolute;
                    text-align: center;
                    line-height: 160PX;
                    left: 0;
                    top: 0;
                }
                li:nth-child(1){
                    background: rgba(255, 0, 0, 0.3);
                    transform: rotateX(90deg) translateZ(70px);
                    -webkit-transform:rotateX(90deg) translateZ(70px);
                    -moz-transform: rotateX(90deg) translateZ(70px);
                    -o-transform:rotateX(90deg) translateZ(-70px);
              
                }
                li:nth-child(2){
                    background:rgba(0, 255, 0, 0.5);
                    transform: rotateX(90deg) translateZ(-70px);
                    -webkit-transform:rotateX(90deg) translateZ(-70px);
                    -moz-transform: rotateX(90deg) translateZ(-70px);
                    -o-transform:rotateX(90deg) translateZ(-70px);
              
                }
                li:nth-child(3){
                    background: rgba(0, 0, 255, 0.3);
                    transform:rotateY(90deg)  translateZ(-70PX) ;
                    -webkit-transform:rotateY(90deg) translateZ(-70px);
                    -moz-transform: rotateY(90deg) translateZ(-70px);
                    -o-transform: rotateY(90deg) translateZ(-70px);
           
                }
                li:nth-child(4){
                    background: rgba(255, 255, 0, 0.2);
                    transform: rotateY(90deg) translateZ(70PX) ;
                    -webkit-transform:rotateY(90deg) translateZ(70px);
                    -moz-transform: rotateY(90deg) translateZ(70px);
                    -o-transform: rotateY(90deg) translateZ(-70px);
               
                }
                li:nth-child(5){
                    background:rgba(255, 255, 255,0.6);
                    transform: translateZ(70PX) ;
                    -webkit-transform:translateZ(70px);
                    -moz-transform:translateZ(70px);
                    -o-transform:translateZ(-70px);
                
                }
                li:nth-child(6){
                    background: rgba(255, 0, 255,0.4);
                    transform: translateZ(-70PX) ;
                    -webkit-transform:translateZ(-70px);
                    -moz-transform:translateZ(-70px);
                    -o-transform:translateZ(-70px);
                    
                }
            }

    
        }
        .agree{
            width: 50%;
        }
        .rightBox{
            position: relative;
            height: 700px;
            width: 100%;
            &{ .transform-style(1000)}
            &{.keyframes(all,right,{
                0%{transform:translateZ(-26.5px) rotateY(0deg);}
                25% {transform:translateZ(-26.5px) rotateY(60deg) }
                50% {transform:translateZ(-26.5px) rotateY(120deg) }
                75% {transform:translateZ(-26.5px) rotateY(240deg)}
                90% {transform:translateZ(-26.5px) rotateY(30deg)}
                100%{transform:translateZ(-26.5px) rotateY(360deg)}
              })
              }
              
            @-webkit-keyframes right{
                0%{ transform:rotateY(0deg);}
                25% {transform:rotateY(60deg)}
                50% {transform:rotateY(120deg)}
                75% {transform:rotateY(240deg)}
                90% {transform:rotateY(300deg)}
                100%{transform:rotateY(360deg)}
            }
            @-moz-keyframes right{
                0%{transform:rotateY(0deg);}
                25% {transform:rotateY(60deg) }
                50% {transform:rotateY(120deg) }
                75% {transform:rotateY(240deg)}
                90% {transform:rotateY(30deg)}
                100%{transform:rotateY(360deg)}
            }
            @-ms-keyframes right{
                0%{transform:rotateY(0deg);}
                25% {transform:rotateY(60deg) }
                50% {transform:rotateY(120deg) }
                75% {transform:rotateY(240deg)}
                90% {transform:rotateY(30deg)}
                100%{transform:rotateY(360deg)}
            }
            @-o-keyframes right{
                0%{transform:rotateY(0deg);}
                25% {transform:rotateY(60deg) }
                50% {transform:rotateY(120deg) }
                75% {transform:rotateY(240deg)}
                90% {transform:rotateY(30deg)}
                100%{transform:rotateY(360deg)}
            }
            @keyframes right{
                0%{transform:rotateY(0deg);}
                25% {transform:rotateY(60deg) }
                50% {transform:rotateY(120deg) }
                75% {transform:rotateY(240deg)}
                90% {transform:rotateY(30deg)}
                100%{transform:rotateY(360deg)}
            }
            img{
                position: absolute;
                width: 150px;
                height: 600px;
            }
            img:nth-child(1){
                background: rgba(255, 255, 0, 0.2);
                transform: rotateY(60deg) translateZ(-43px);
                -webkit-transform:rotateY(60deg) translateZ(-43px);
                -moz-transform:rotateY(60deg) translateZ(-43px);
                -o-transform:rotateY(60deg) translateZ(-43px);
            }
            img:nth-child(2){
                background: rgba(255, 0, 0, 0.2);
                transform: rotateY(-60deg) translateZ(-43px);
                -webkit-transform:rotateY(-60deg) translateZ(-43px);
                -moz-transform:rotateY(-60deg) translateZ(-43px);
                -o-transform:rotateY(-60deg) translateZ(-43px);
            }
            img:nth-child(3){
                background: rgba(0, 255, 0, 0.2);
                transform: translateZ(43px) ;
                -webkit-transform:translateZ(43px);
                -moz-transform:translateZ(43px);
                -o-transform:translateZ(43px);
            }
        }
    }
    
}

.agree{
    background-color: aqua;
}
